<template>
  <div class="editAddress container">
    <!-- navbar -->
    <van-nav-bar left-arrow title="详情地址" @click-left="back()"></van-nav-bar>
    <!-- 编辑地址 -->
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :address-info="this.$store.state.address.defaultAddress"
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-default="onchangeDufaultAddress"
    />
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import { areaList } from '@vant/area-data';
export default {
  name: 'YscShopEditaddress',
  data () {
    return {
      areaList: areaList,
      searchResult: [],
      // 是否是编辑进入
      isId: false
    };
  },
  created () {
    this.isId = this.$route.query.id
  },
  computed: {
    ...mapState(['addressList']),
  },
  mounted () {
    // 接收编辑进入
    // this.$nextTick(() => {
    //   this.$bus.$on('addEdit', res => {
    //     this.isEdit = res
    //   })
    // });
  },

  methods: {
    ...mapMutations(['getAddressList']),
    // 提交数据
    onSave (data) {
      // 判断是否有这个地址
      const x = this.addressList.findIndex(x => x.id == this.isId);
      const list = JSON.parse(window.localStorage.getItem('addressList'))
      if (x == -1) {
        // 判断用户 是不是第一个收货地址：是的话就把第一个变成默认收货 帮加
        if (this.addressList.length <= 0) {
          data.isDefault = true
        }
        // 地址加工
        list.forEach(v => v.isDefault = '')
        const address = {
          id: list.length + 1,
          name: data.name,
          tel: data.tel,
          address: data.province + ' ' + data.city + ' ' + data.county + ' ' + data.addressDetail,
          isDefault: data.isDefault,
          postalCode: data.postalCode,
          areaCode: data.areaCode
        }
        // 判断新增收货人是否是
        if (data.isDefault) {
          // 传入默认收货人信息
          this.$store.commit('receiverInfo', {
            // 收货人加手机号
            namePhone: data.name + " " + data.tel,
            // 省市县 详细地址
            address: data.province + " " + data.city + " " + data.county
          })
        }

        list.push(address)
        window.localStorage.setItem('addressList', JSON.stringify(list))
        this.$toast.success('创建成功')
      } else {
        // 修改地址加工
        const address = {
          id: this.$route.query.id,
          name: data.name,
          tel: data.tel,
          address: data.province + ' ' + data.city + ' ' + data.county + ' ' + data.addressDetail,
          isDefault: data.isDefault,
          postalCode: data.postalCode,
          areaCode: data.areaCode
        }
        // 修改数据
        list.splice(this.$route.query.index, 1, address)
        // 更改新地址
        window.localStorage.setItem('addressList', JSON.stringify(list))
        // 判断新增收货人是否是
        if (data.isDefault) {
          // 传入默认收货人信息
          this.$store.commit('receiverInfo', {
            // 收货人加手机号
            namePhone: data.name + " " + data.tel,
            // 省市县 详细地址
            address: data.province + " " + data.city + " " + data.county
          })
        }
        // 更改默认地址
        this.$nextTick(() => {
          const address = JSON.parse(window.localStorage.getItem('addressList'));
          address.forEach(v => v.isDefault = '');
          address[this.$route.query.index].isDefault = true
          window.localStorage.setItem('addressList', JSON.stringify(address))
        })

        this.$toast.success('修改成功')
      }
      // 更新地址列表
      this.$nextTick(() => {
        this.getAddressList()
      })
      this.$router.back()
    },
    // 删除表单
    onDelete () {
      const list = JSON.parse(window.localStorage.getItem('addressList'));
      // 判断删除的内容是不是默认收货人
      list.forEach(v => {
        if (v.isDefault == true) {
          window.localStorage.removeItem('receiverInfo')
          return
        }
      })
      console.log(1);
      list.splice(this.$route.query.index, 1)
      // window.localStorage.setItem('addressList', JSON.stringify(list))
      // 删除成功 返回
      this.$toast.success('删除成功')
      this.$nextTick(() => {
        this.getAddressList()
        this.$router.back()
      })
    },
    // 推荐详情地址
    // 修改默认地址
    onchangeDufaultAddress (val) {
      console.log(val);
    },
    back () {
      this.$router.back()
    }
  },
};
</script>

<style lang="less" scoped>
</style>